<template>
  <div class="wrap flex flex-col">
      <!-- 房款总价 -->
        <div class="count-item flex items-center">
            <van-field v-model="totalPrice" label="房屋总价" input-align="right" placeholder="" />
            <span style="width:10vw;" class="mr-2">万元</span>
      </div>
        <!-- 首付比例 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="首付比例"
                input-align="right"
                :value="payPercent"
                @click="showPicker = true"
                />
                <van-popup v-model="showPicker" round position="bottom">
                    <van-picker
                        show-toolbar
                        :columns="scaleList"
                        :default-index="2"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"
                    />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <!-- 贷款总额 -->
        <div class="count-item flex items-center">
            <van-field v-model="loanMoney" label="贷款总额" input-align="right" placeholder="" />
            <span style="width:10vw;" class="mr-2">万元</span>
        </div>
      <!-- 贷款年限 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="贷款年限"
                input-align="right"
                :value="loanYear"
                @click="showPicker1 = true"
                />
                <van-popup v-model="showPicker1" round :overlay="false" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="loanYearsList"
                    :default-index="29"
                    @cancel="showPicker1 = false"
                    @confirm="onConfirm1"
                />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <!-- 利率方式 -->
        <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="利率方式"
                input-align="right"
                :value="currRate"
                @click="showPicker2 = true; if(zdyRate){currRateIndex = 99}"
                />
                <van-popup v-model="showPicker2" :style="{ height: '100%' }" :overlay="isoverlay" position="bottom">
                    <div class="custom-area flex items-center">
                        <span class="zdy">自定义利率:</span>
                        <input type="number" class="ipt-text" v-model="zdyRate" placeholder="请输入利率" /> 
                        <span class="gray-8">%</span>
                        <div class="btn" @click="okRate">确定</div>
                    </div>
                    <div class="choose-rate">
                        <div class="tips">或者选择常用利率</div>
                        <ul>
                            <li
                            class="rate-item"
                            v-for="(item, index) in rateList"
                            :key="index"
                            @click="chooseRate(index)"
                            :class="{'on': index == currRateIndex}"
                            >
                                {{item.desc}}{{index == 0 || index == 1?'': item.name}}
                            </li>
                        </ul>
                    </div>
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>
        </div>
        <!-- LPR -->
        <!-- <div class="count-item flex items-center">
            <van-field
                readonly
                clickable
                label="LPR"
                input-align="right"
                :value="defaultRate"
                @click="showPicker3 = true"
                />
                 <van-popup v-model="showPicker3" round position="bottom">
                <van-picker
                    show-toolbar
                    :columns="rateList"
                    @cancel="showPicker3 = false"
                    @confirm="onConfirm3"
                />
                </van-popup>
                <van-icon name="arrow" color="#ccc" size="1.5rem" class="mr-2"/>

        </div> -->
        <!-- 基点 商贷利率 ==>LPR报价时使用-->
        <!-- <div v-if="isLPR">
            <div class="count-item flex items-center">
            <van-field
                clickable
                label="基点"
                input-align="right"
                v-model="basicPoint"
                />
                <span style="width:25vw;" class="mr-2">BP（‱）</span>
            </div>
            <div class="count-item flex items-center">
                <van-field
                    clickable
                    label="商贷利率"
                    input-align="right"
                    v-model="finalRateText"
                    />
            </div>
        </div> -->
        
        <div class="count-item btn" @click="caculateLoan">开始计算</div>
        <div class="bottom-tips">create by wangerge</div>
            <van-popup v-model="showResult" :style="{height: '100%'}" :overlay="false" closeable >
                <count-result
                    v-if="showResult"
                    type="sd"
                    :totalPrice="totalPrice"
                    :sloanMoney="loanMoney"
                    :syears="years"
                    :sfinalRate="finalRate"
                    :gloanMoney="0"
                    :gyears="0"
                    :gfinalRate="0"
                    id="result"/>
            </van-popup>
  </div>
</template>
<script>
import countResult from './countResult'
import { Toast } from 'vant';

export default {
    name:'shangdaiPage',
    components:{
        countResult
    },
    data(){
        return{
            isLPR: true,
            i: 0,
            value: '',
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            showPicker4: false,
            showPicker5: false,
            totalPrice: 100,
            payRateLabel: "三成",
            payRate: 0.3,
            payPercent: '三成',
            scaleList: ["一成","二成","三成","四成","五成","六成","七成","八成","九成"],
            loanYearsList: [],
            loanYear: "30年(360期)",
            // defaultRate: '基准利率',
            rateList: [
                {
                    name: "最新报价利率(LPR)",
                    desc: '',
                    key: 4.65
                },
                 {
                    name: "基准利率",
                    desc: '',
                    key: 4.9                   
                },
                 {
                    name: "7折",
                    desc: '基准利率下限',
                    key: 3.43
                },
                 {
                    name: "85折",
                    desc: '基准利率下限',
                    key: 4.165
                },
                 {
                    name: "1.05倍",
                    desc: '基准利率上限',
                    key: 5.145
                },
                 {
                    name: "1.1倍",
                    desc: '基准利率上限',
                    key: 5.39
                }
            ],
            basicPoint: 0,
            showResult: false,
            currRateIndex: 0,
            currRate: '',
            isoverlay: false,
            zdyRate: '',
            finalRate: 0,
            years: 30,
            // loanMoney: 0,
            finalRateText: ''

        }
    },
    watch: {
        payRateLabel: {
            handler(){
                if (!this.payRateLabel) {
                    this.payMoney = this.payRate;
                    return this.payRate + "万";
                } else {
                    this.payMoney = (this.totalPrice * this.payRate).toFixed(2);
                    // 首付比例
                    this.payPercent =  (
                    this.payRateLabel +
                    "(" +
                    (this.totalPrice * this.payRate).toFixed(2) +
                    "万" +
                    ")"
                    )
                }
            }
        }
        
    },
    created(){
    //    this.getRate();
    },
    mounted() {
        for (let i = 1; i < 31; i++) {
        this.loanYearsList.push(i + "年" + "(" + i * 12 + "期)");
        }  
    },
     computed:{
        //  ...mapState("wap/count", ["rateList", "srateList"]),
         
        // 贷款总额
         loanMoney() {      
            return (this.totalPrice * (1 - this.payRate)).toFixed(2);
            },
        //  首付比例
        //  payPercent() {
        //     if (!this.payRateLabel) {
        //         this.payMoney = this.payRate;
        //         return this.payRate + "万";
        //     } else {
        //         this.payMoney = (this.totalPrice * this.payRate).toFixed(2);
        //         return (
        //         this.payRateLabel +
        //         "(" +
        //         (this.totalPrice * this.payRate).toFixed(2) +
        //         "万" +
        //         ")"
        //         )
        //     }
        // },
        // finalRateText(){
        //     let res = (this.rateList[this.i].key + this.basicPoint/100);
        //     this.finalRate = res;
        //     return `${this.rateList[this.i].key}% + ${this.basicPoint/100}% = ${res.toFixed(2)} %`;
        // }
    },
    methods: {
        //  获取利率
        // async getRate(){
        //     let { data } = await this.$axios.post(APIS.RATE, {
        //             type: 2
        //         })
        //         console.log(data)
        //         this.rateList = JSON.parse(JSON.stringify(data.data))
        //         // 默认利率方式
        //         this.currRate = `${this.rateList[this.i].name}${this.rateList[this.i].key}%`;
        //         // this.loanMoney = (this.totalPrice * (1 - this.payRate)).toFixed(2);
        //         // this.payPercent = !this.payRateLabel?( this.payMoney = this.payRate, this.payRate + "万"): 
        //         // ( this.payMoney = (this.totalPrice * this.payRate).toFixed(2),
        //         // this.payRateLabel +
        //         // "(" +
        //         // (this.totalPrice * this.payRate).toFixed(2) +
        //         // "万" +
        //         // ")"
        //         // )
        //         let res = (this.rateList[this.i].key + this.basicPoint/100);
        //         this.finalRate = res;
        //         this.finalRateText = (`${this.rateList[this.i].key}% + ${this.basicPoint/100}% = ${res.toFixed(2)} %`)
        // },
        tips(){
            Toast('没有');
        },
        onConfirm(value, index) {
            console.log(value, index)
            this.payRateLabel = value;
            this.payRate = (index +1) /10;  //首付百分比
            this.showPicker = false;

    },
        onConfirm1(value,index) {
         console.log(value,index)
            this.years = index + 1;
            this.loanYear = value;
            this.showPicker1 = false;

        },
     onConfirm2(value) {
         console.log(value)
            this.value = value;
            this.showPicker2 = false;
    },
     onConfirm3(value) {
         console.log(value)
            this.value = value;
            this.showPicker3 = false;
    }, 
    onConfirm4(value) {
         console.log(value)
            this.value = value;
            this.showPicker4 = false;
    },
    //  选择利率
    chooseRate(index){
        if(index == 0){
            this.isLPR = true;
        }else{
            this.isLPR = false;
        }
        this.currRateIndex = index;
        this.currRate = `${this.rateList[index].name}${this.rateList[index].key}%`;
        this.showPicker2 = false;
        this.finalRate = this.rateList[index].key;
    },
    //  自定义利率
    okRate(){       
        if(this.zdyRate){
            this.finalRate = this.zdyRate;
            this.isLPR = false;
            this.currRate = `自定义利率 ${this.zdyRate}%`;
            this.showPicker2 = false;
        }else{
            Toast('请填写利率');
        }
        
    },
    //  开始计算
     caculateLoan() {
         if(!this.totalPrice){
             Toast('请填写房屋总价');
             return;
         }
         this.showResult = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap{
    align-items: center;
    font-family: PingFangSC-Regular;
    .count-item{
        width: 87.5vw;
        height: 5.5vh;
        background: #FFFFFF;
        border-radius: 8px;
        margin-top: 2.5vh;
    }
    .count-item.btn{
        text-align: center;
        line-height: 5.5vh;
        color: #fff;
        background-color: #4687f2;
    }
    .bottom{
        font-size: 15px;
        color: #A6A6A6;
        letter-spacing: 0;
        text-align: center;
        margin-top: 30px;
        }
        .bottom .line{
            margin: 0 15px;
        }
    .custom-area{
        width: 100%;
        font-size: 15px;
        overflow: hidden;
        padding: 2vh 20px 8px 0;
        justify-content: space-between;
        .zdy{
            margin-left: 6vw;
        }
        .ipt-text{
            width: 25vw;
        }
        .btn{
            width: 15vw;
            height: 4vh;
            line-height: 4vh;
            border: none;
            font-size: 14px;
            color: #fff;
            text-align: center;
            border-radius: 2px;
            background-color: #4687f2;     
        }
    }
    .choose-rate{
        .tips{
            font-size: 12px;
            color: #83868f;
            line-height: 5vh;
            background: #fafafa;
            padding: 0 6vw;
            background-color: #eee;
        }
        ul li{
            padding: 0 6vw;
            line-height: 8vh;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        li.on:after {
            content: '';
            position: absolute;
            width: 6vw;
            height: 3vh;
            right: 3vw;
            top: 50%;
            margin-top: -1.5vh;
            background: url(../assets/ok.png) no-repeat;
            background-size: 17px auto;
            }
    }
}
.bottom-tips{
    font-size: 16px;
    color: #4687f2;
    text-decoration: underline;
    margin-top: 2.5vh;
    width: 87.5vw;
    text-align: center;
}
/deep/ .van-cell{
    background-color:transparent;
}
/deep/ .van-field__label{
    margin-right: 0;
}
</style>